// pages/songsDetail.js
import request from '../../../utils/request'
import PubSub from 'pubsub-js'
import moment from 'moment'
Page({
  // 1.控制歌曲播放状态
  handlerPlayOrPause(){
    // 获取原值 然后取反
    const isPlay = !this.data.isPlay
    // 更新回去
    this.setData({
      isPlay
    })

    // 使用当前按钮控制音乐的播放或暂停
    if(isPlay){
      this.player.play()
    }else{
      this.player.pause()
    }
  },

  // 2.获取歌曲详细信息
  async getSongInfoData(){
    const {songId: ids} = this.data
    const result = await request({
      url:'/song/detail',
      data:{ids}
    })
    if (result.code === 200) {
      // console.log('res',result)
      this.setData({
        songInfo:{
          songName: result.songs[0].name,
          singer: result.songs[0].ar[0].name,
          songPicUrl: result.songs[0].al.picUrl,
          dt:moment(result.songs[0].dt).format('mm:ss')// 歌曲的播放时长
        }
      })
      // 设置导航标题项为歌曲名字
      wx.setNavigationBarTitle({
        title: result.songs[0].name,
      })
    }
  },

  // 3.获取歌曲的播放链接地址
  async getSongUrl(){
    const {
      songId: id
    } = this.data
    const result = await request({
      url: '/song/url',
      data: {
        id
      }
    })
    if (result.code === 200){
      this.setData({
        songUrl: result.data[0].url
      })
    }
  },

  // 4.上一首盒下一首
  handlerSwitch(e){
    // 1.获取按钮标识
    const type = e.target.id
    // 2.将标识传递给推荐歌曲列表
    PubSub.publish('type',type)
  },
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,// 歌曲是否播放
    songId: '',// 当前播放歌曲的id
    songInfo: {},// 歌曲详情信息
    songUrl: '',// 歌曲的播放链接
    currentTime: '',// 歌曲的当前播放时长 (播放进度)
    durationTime: '',// 歌曲的总时长
    progressWidth: ''// 进度条的进度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // console.log('00',options);
    // 1.获取传递过来的歌曲id
    const songId = options.songId
    // 2.将歌曲id存储一下
    this.setData({
      songId,
      isPlay: true
    })
    // 3.发送请求 获取歌曲详情
    await this.getSongInfoData()
    // 4.获取歌曲播放链接
    await this.getSongUrl()

    // 5.让歌曲立即播放 先创建一个全局唯一的播放对象
    // this.player = wx.getBackgroundAudioManager()
    // this.player.src = this.data.songUrl// 播放的链接
    // this.player.title = this.data.songInfo.songName
    this.songPlay()

    // 6.自定义按钮和系统按钮双向绑定
    this.player.onPlay(() => {
      this.setData({
        isPlay:true
      })
    })
    this.player.onPause(() => {
      this.setData({
        isPlay:false
      })
    })
    this.player.onEnded(() => {
      // 播放完成之后，自动播放下一首
      PubSub.publish('type', 'next')
    })

    // 7.接收pubsub传递过来的新歌曲的songId
    PubSub.subscribe('songId', async (_,songId)=>{
      // 1.更新一下当前的songId
      this.setData({
        songId,
        isPlay:true
      })
      // 2.重新获取歌曲详情信息和播放地址
      await this.getSongInfoData()
      await this.getSongUrl()
      // 3.重新播放
      this.songPlay()
    })

    // 8. 监听音乐播放的时间
    this.player.onTimeUpdate(() => {
      this.setData({
        // 1s = 1000ms  1min = 60s 1h=60min 1day = 24h
        currentTime: moment(this.player.currentTime * 1000).format('mm:ss'),
        durationTime: moment(this.player.duration * 1000).format('mm:ss'),
        progressWidth: this.player.currentTime * 450 / this.player.duration + 'rpx'
      })
    })
  },
  songPlay() {
    //  让歌曲立即播放 先获取一个全局唯一的播放器对象
    this.player = wx.getBackgroundAudioManager()
    if (!this.data.songUrl) {
      wx.showModal({
        title: '提示',
        content: '请充值会员',
        success(res) {
          if (res.confirm) {
            // 应该跳转到充值的页面
            PubSub.publish('type', 'next')
          } else if (res.cancel) {
            // console.log('用户点击取消')
            // 如果用户点了取消，则回到列表页
            wx.navigateTo({
              url: '/pages/recommendSong/recommendSong',
            })
          }
        }
      })
      this.setData({
        isPlay: false // 不播放的状态
      })
      return // 阻止代码向下执行
    }
    this.player.src = this.data.songUrl // 播放的链接
    // 还需要设置一个title
    this.player.title = this.data.songInfo.songName
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})